<template>
  <div>
    <ElForm inline>
      <ElFormItem label="TITLE">
        <ElInput v-model="queryCondition.titleLike"></ElInput>
      </ElFormItem>
      <ElFormItem label="BANK">
        <ElInput v-model="queryCondition.bankName"></ElInput>
      </ElFormItem>
      <ElFormItem>
        <ElButton type="primary" icon="Search" @click="queryByCondition(1)"></ElButton>
      </ElFormItem>
    </ElForm>

    <!-- <div>{{ pageInfo.results }}</div> -->
    <ElRow>
      <template v-for="(e, i) in pageInfo.results" :key="i">
        <ElCol :span="6">
          <!-- {{e.materialCode}} -->
          <ElCard>
            <template #header>
              <div class="loan-card-header">
                <div class="loan-header-title">RATE:{{ e.rate.toFixed(2) }}%</div>
              </div>
            </template>
            <template #default>
              <div class="loan-card-body">
                <div class="loan-body-left">
                  <div>
                    bankCode: <ElTag>{{ e.bankCode }}</ElTag>
                  </div>
                  <div>title: {{ e.title }}</div>
                  <div>loanTime: {{ e.period }}</div>
                  <div>unit: {{ e.unit }}</div>
                </div>
                <div class="loan-body-right">
                  <ElButton type="primary" @click="open4Insert(e)">ApplyLoan</ElButton>
                </div>
              </div>
            </template>
          </ElCard>
        </ElCol>
      </template>
    </ElRow>
    <ElPagination
      background
      layout="prev, pager, next"
      :total="pageInfo.total"
      :page-size="queryCondition.pageSize"
      :current-page="queryCondition.pageNum"
      @current-change="queryByCondition"
    />
    <LoanInsert ref="insertDrawer"></LoanInsert>
  </div>
</template>
<script lang="ts" setup>
import * as fund from '@/apis/fund'
const insertDrawer: any = ref(null)
const pageInfo = reactive({
  total: 0,
  results: [] as Array<any>
})
const queryCondition = reactive({
  pageNum: 1,
  pageSize: 8,
  titleLike: '',
  bankName: ''
})
const queryByCondition = async (pageNum?: number) => {
  if (pageNum) {
    queryCondition.pageNum = pageNum
  }
  // const res = await axios({
  //   method: 'post',
  //   url: 'http://localhost:9091/bankMaterial/queryForCompany',
  //   data: queryCondition
  // })
  const res = await fund.bankMaterialqueryForCompany(queryCondition)

  pageInfo.total = res.data.total
  pageInfo.results = res.data.records
}
onMounted(() => {
  queryByCondition(1)
})
const open4Insert = (data: any) => {
  insertDrawer.value.show(data)
}
</script>
<style lang="scss" scoped>
.loan-card-header {
  //   background-color: blueviolet;
  width: 240px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 48px;
  background-color: wheat;
}
.loan-header-title {
  font-size: 40px;
  font-weight: 800;
  color: var(--el-color-primary);
  border-radius: 10px;
}
.loan-card-body {
  width: 100%;
  height: 100px;
  display: flex;
}
.loan-body-left {
  flex: 1;
}
.load-body-right {
  width: 100px;
}
</style>
